<!--
 * @Author: lihaogn
 * @Date: 2021-12-15 22:50:51
 * @LastEditTime: 2021-12-21 14:04:43
 * @LastEditor: lihaogn
 * @Description: 新增角色对话框
 * @FilePath: \lix-admin-vue2\src\views\system\user-manage\role-list\modules\NewOrUpdateRoleDialog.vue
-->
<template>
  <el-dialog
    :close-on-click-modal="false"
    title="新增角色"
    :visible.sync="dialogVisible"
    width="420px"
    @close="handleDialogCancel"
  >
    <el-form
      ref="roleForm"
      :model="roleForm"
      :rules="roleFormRules"
      size="small"
      label-width="80px"
    >
      <el-form-item label="角色名称" prop="name">
        <el-input
          type="text"
          placeholder="普通用户"
          v-model.trim="roleForm.name"
          autocomplete="off"
          :autofocus="true"
          :show-word-limit="true"
          :maxlength="20"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="角色描述"
          v-model.trim="roleForm.description"
          :show-word-limit="true"
          :maxlength="30"
        ></el-input>
      </el-form-item>
    </el-form>

    <span slot="footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button
        type="primary"
        @click="handleDialogOk"
        :loading="okButtonLoading"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import {
  reqNewRole,
  reqUpdateRole
} from '../../../../../api/user-manage/role/api'
import { dialogMixin } from '../../../../../mixins/dialog'
export default {
  mixins: [dialogMixin],
  data() {
    return {
      roleForm: {
        name: '',
        description: ''
      },
      roleFormRules: {
        name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }]
      }
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.dialogVisible = val
        this.loading = true
        if (this.type === 'EDIT') {
          this.roleForm = {
            name: this.dialogData.name,
            description: this.dialogData.description
          }
        }
        this.loading = false
      } else {
        this.$refs['roleForm'].resetFields()
      }
    }
  },
  methods: {
    handleDialogCancel() {
      this.$emit('update:visible', false)
    },
    /**
     * @author: lihaogn
     * @Date: 2021-12-19 22:12:12
     * @description: 新增/修改角色
     * @param {*}
     * @return {*}
     */
    handleDialogOk() {
      this.okButtonLoading = true

      this.$refs['roleForm'].validate(async valid => {
        if (valid) {
          let res
          if (this.type === 'NEW') {
            res = await reqNewRole(this.roleForm)
          } else {
            res = await reqUpdateRole(this.dialogData.id, {
              ...this.roleForm,
              type: 'UPDATE'
            })
          }

          if (res.success) {
            this.$message.success(res.message)
            this.dialogVisible = false
            this.$emit('ok')
          }

          this.okButtonLoading = false
        } else {
          this.okButtonLoading = false
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped></style>
